<template>
   <div class="wrapper-jsc">
    <div class="date-box">
            <el-form :inline="true" :model="listQuery">
        <el-form-item label="年">
          <el-date-picker
            v-model="listQuery.year"
           type="year"
            value-format="yyyy"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="month-jsc" label="月份">
          <el-select filterable
            v-model="listQuery.month"
            placeholder="月"
            @change="fetchData()"
          >
            <el-option label="全部" value="0"></el-option>
            <el-option label="1月" value="1"></el-option>
            <el-option label="2月" value="2"></el-option>
            <el-option label="3月" value="3"></el-option>
            <el-option label="4月" value="4"></el-option>
            <el-option label="5月" value="5"></el-option>
            <el-option label="6月" value="6"></el-option>
            <el-option label="7月" value="7"></el-option>
            <el-option label="8月" value="8"></el-option>
            <el-option label="9月" value="9"></el-option>
            <el-option label="10月" value="10"></el-option>
            <el-option label="11月" value="11"></el-option>
            <el-option label="12月" value="12"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
         
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="运营数据" name="first">
          <el-table :data="list3" style="width: 100%;padding-top: 15px;">

    <el-table-column label="产品" >
      <template slot-scope="{row}">
        {{ row.productTypeName   }}
      </template>
    </el-table-column>
    <el-table-column label="合同数量" align="center">
      <template slot-scope="{row}">
        {{ row.contractNumber }}
      </template>
    </el-table-column>
    <el-table-column label="合同金额" align="center">
      <template slot-scope="{row}">
          ¥{{ row.contractAmount }}
      </template>
    </el-table-column>
        <el-table-column label="回款"  align="center">
      <template slot-scope="{row}">
        ¥{{ row.collectionAmount }}
      </template>
    </el-table-column>
        <el-table-column label="未回款"  align="center">
      <template slot-scope="{row}">
        ¥{{ row.collectionUnAmount }}
      </template>
    </el-table-column>
        <!-- <el-table-column label="战区贡献"  align="center">
      <template slot-scope="{row}">
        <el-tag :type="row.status | statusFilter">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column> -->
  </el-table> 
      </el-tab-pane>
      <el-tab-pane label="战区运营毛利数据" name="second">
        <el-table :data="list" border style="width: 100%; padding-top: 15px">
          <el-table-column label="战区名称">
            <template slot-scope="{ row }">{{ row.regionName }}</template>
          </el-table-column>
          <el-table-column label="回款收入" align="center">
            <template slot-scope="{ row }">¥{{ row.collectionAmount }}</template>
          </el-table-column>
          <el-table-column label="外采" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.collectionAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="人力成本" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.paymentAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="变动成本" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.salary }}</span>
            </template>
          </el-table-column>
          <el-table-column label="贡献毛利" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.paymentAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="毛利" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.grossProfit }}</span>
            </template>
          </el-table-column>
          <el-table-column label="毛利率" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.grossProfitRate }}</span>
            </template>
          </el-table-column>
        </el-table>
          
      </el-tab-pane>
          <el-tab-pane label="战区运营财务数据" name="three">
             <el-table :data="list2" border style="width: 100%; padding-top: 15px">
          <el-table-column label="战区名称">
            <template slot-scope="{ row }">{{ row.regionName }}</template>
          </el-table-column>

          <el-table-column label="合同金额" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.collectionAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回款金额" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.collectionUnAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="未回款" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.paymentAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="外采已付" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.paymentAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="外采未付" align="center">
            <template slot-scope="{ row }">
              <span>¥{{ row.paymentAmount }}</span>
            </template>
          </el-table-column>
        </el-table>
          
      </el-tab-pane>
         
    </el-tabs>
  </div>
</template>
<script>
import { getFinance, getGrossProfit,getProductContractAmount } from "@/api/admin_jsc";

export default {
  data() {
    return {
      showbtns: false,
      activeName: "first",
     listQuery: {
        year: "2020",
        month: "0",
      },
       list: [], 
       list2: [], 

       list3: [], 

    };
  },
  components: {
  
  },
  created() {
    this.fetchData();
  },
 methods: {
      handleClose(){
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    fetchData() {
      getGrossProfit(this.listQuery).then((res) => {
        this.list = res.data.data;
        
      });
      getFinance(this.listQuery).then((res) => {
        this.list2 = res.data.data;
        
      });
      getProductContractAmount(this.listQuery).then((res) => {
        this.list3 = res.data.data;
       
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.zq-box{
    margin-top: 24px;;
    margin-bottom: 24px;
}
.wrapper-jsc{
    .el-date-editor.el-input{
          width: 110px;
    }
    .el-select{
      width: 100px;
    }
}
</style>